<template>
  <div class="user_information">
    <h1>后台用户信息页</h1>
    <!-- {{ userinfo }} -->
    <template class="userinfo">
      <el-descriptions title="用户信息" :column="1" border style="width: 30%">
        <el-descriptions-item
          label="用户名"
          label-class-name="my-label"
          content-class-name="my-content"
          >{{ userinfo.userName }}</el-descriptions-item
        >
        <el-descriptions-item label="ID号">{{ userinfo.userID }}</el-descriptions-item>
        <el-descriptions-item label="权限">{{ userRank }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{
          userStatus
        }}</el-descriptions-item>
      </el-descriptions>
    </template>
  </div>
</template>

<script>
export default {
  name: "userInformation",
  data() {
    return {
      userinfo: null, //用户信息
      userRank: null, //权限
      userStatus: null, //账号状态
    };
  },
  mounted() {
    this.userinfo = JSON.parse(localStorage.getItem("userinfo"));
    this.change_userRank();
  },
  methods: {
    //改变权限/状态的文字
    change_userRank() {
      let _this = this;
      let rank = this.userinfo.user_rank || 0;
      let userStatus = this.userinfo.u_status;
      switch (rank) {
        case 0:
          _this.userRank = "普通用户";
          break;
        case 1:
          _this.userRank = "管理员";
          break;
        case 2:
          _this.userRank = "超级管理员";
          break;
        default:
          _this.userRank = null;
      }
      switch (userStatus) {
        case 0:
          _this.userStatus = "封禁";
          break;
        case 1:
          _this.userStatus = "正常";
          break;
        case 2:
          _this.userStatus = "已注销";
          break;
        default:
          _this.userStatus = null;
      }
    },
  },
};
</script>

<style>
.userinfo {
  text-align: center;
}
.user_information {
  text-align: center;
  margin-top: 50px;
}

.my-label {
  background: #e1f3d8;
}

.my-content {
  background: #fde2e2;
  background-image: linear-gradient(to top, lightgrey 0%, lightgrey 1%, #e0e0e0 26%, #efefef 48%, #d9d9d9 75%, #bcbcbc 100%);
}
</style>